/**
 * 面试设置
 * */
import React from 'react';
import { Anchor, Switch, message } from 'antd';
import { withRouter } from 'umi';
import { useRequest, defaultFormatResult } from '@/hooks';
import authHelper from '@/utils/auth/helper';
import { getTabContainer } from '@/utils/utils';

import { FormHeader } from '../components';
import { RoundTable, PeriodItem, DeclareTable, InterviewEvaluation, ImageDownload } from './containers';
import { getRecruitParam, updateRecruitParam } from './service';
import { RECRUIT_CODE } from './constants';

const { checkCode } = authHelper;
const { Link } = Anchor;

const Interview = () => {
    const AUTH = {
        ROUND: checkCode('office:recruitment:setting:interview:round'),
        EVALUATION: checkCode('office:recruitment:setting:interview:evaluation'),
        REGISTER: checkCode('office:recruitment:setting:interview:register'),
        SIGN: checkCode('office:recruitment:setting:interview:sign')
    };

    const [paramType, setParamType] = React.useState('');

    // 获取发送限制
    const { data: sendLimit, loading: sendLimitLoading, run: fetchSendLimit } = useRequest(
        () => getRecruitParam(RECRUIT_CODE.SEND_LIMIT),
        {
            manual: true,
            ...defaultFormatResult
        }
    );

    // 获取声明设置
    const { data: declareSetting, loading: declareSettingLoading, run: fetchDeclareSetting } = useRequest(
        () => getRecruitParam(RECRUIT_CODE.STATEMENT_SETTING_SWITCH),
        {
            manual: true,
            ...defaultFormatResult
        }
    );

    // 更新发送限制
    const { run: updateParam, loading: paramLoading } = useRequest(updateRecruitParam, {
        manual: true,
        onSuccess: res => {
            const { code, msg } = res;
            if (code === 10000) {
                if (paramType === RECRUIT_CODE.SEND_LIMIT) {
                    fetchSendLimit();
                } else {
                    fetchDeclareSetting();
                }
                message.success('保存成功');
                return;
            }
            message.error(msg);
        }
    });

    const handleSwitchChange = checked => {
        setParamType(RECRUIT_CODE.STATEMENT_SETTING_SWITCH);
        updateParam({
            paramCode: RECRUIT_CODE.STATEMENT_SETTING_SWITCH,
            paramValue: checked ? '1' : '0'
        });
    };

    const handleSave = v => {
        setParamType(RECRUIT_CODE.SEND_LIMIT);
        updateParam({
            paramCode: RECRUIT_CODE.SEND_LIMIT,
            paramValue: v
        });
    };

    React.useEffect(() => {
        fetchSendLimit();
        fetchDeclareSetting();
    }, []);

    const titleStyle = { marginBottom: 12, color: 'rgba(0, 0, 0, 0.3)' };

    const renderAnchor = () => {
        const arr = [
            {
                title: '面试轮次',
                href: '#interview1',
                show: AUTH.ROUND
            },
            {
                title: '能力评估',
                href: '#interview2',
                show: AUTH.EVALUATION
            },
            {
                title: '应聘登记表',
                href: '#interview3',
                show: AUTH.REGISTER
            },
            {
                title: '面试签到',
                href: '#interview4',
                show: AUTH.SIGN
            }
        ];
        const finalArr = arr.filter(item => item.show);
        if (finalArr.length > 0) {
            return (
                <Anchor getContainer={() => getTabContainer()} offsetTop={24} style={{ padding: '0 30px' }}>
                    {finalArr.map(item => (
                        <Link key={item.href} href={item.href} title={item.title} />
                    ))}
                </Anchor>
            );
        }
        return null;
    };

    return (
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <div style={{ maxWidth: 1200, flex: 1 }}>
                {AUTH.ROUND && (
                    <div style={{ marginBottom: 24, maxWidth: 800 }}>
                        <FormHeader title="面试轮次" id="interview1" style={{ marginBottom: 8 }} />
                        <div style={titleStyle}>用于面试安排的面试轮次字段。</div>
                        <RoundTable />
                    </div>
                )}

                {AUTH.EVALUATION && (
                    <div style={{ marginBottom: 24, maxWidth: 800 }}>
                        <FormHeader title="能力评估" id="interview2" style={{ marginBottom: 8 }} />
                        <div style={titleStyle}>用于面试过程中对候选人的能力评估。配置后在面试准备环节即可选用。</div>
                        <InterviewEvaluation />
                    </div>
                )}
                {AUTH.REGISTER && (
                    <div style={{ marginBottom: 24, maxWidth: 1200 }}>
                        <FormHeader title="应聘登记表" id="interview3" style={{ marginBottom: 0 }} />
                        <PeriodItem
                            beforeStr={<span style={{ color: 'rgba(0,0,0,0.85)' }}>发送限制</span>}
                            afterStr="天"
                            style={{ height: 48 }}
                            value={sendLimit?.paramValue || ''}
                            loading={sendLimitLoading || (paramLoading && paramType === RECRUIT_CODE.SEND_LIMIT)}
                            afterNode="内提交过应聘登记表的候选人，不重复发送链接"
                            onSave={handleSave}
                            disabled={!checkCode('office:recruitment:setting:interview:register:limit')}
                        />
                        <div
                            style={{
                                display: 'flex',
                                // justifyContent: 'space-between',
                                alignItems: 'center',
                                maxWidth: 800,
                                color: 'rgba(0,0,0,0.85)',
                                paddingBottom: 4
                            }}
                        >
                            声明设置：
                            {checkCode('office:recruitment:setting:interview:register:declare:status') && (
                                <Switch
                                    checked={declareSetting?.paramValue === '1'}
                                    loading={
                                        declareSettingLoading ||
                                        (paramLoading && paramType === RECRUIT_CODE.STATEMENT_SETTING_SWITCH)
                                    }
                                    onChange={handleSwitchChange}
                                />
                            )}
                        </div>
                        <div style={titleStyle}>开启后，候选人必须同意隐私声明才能提交应聘登记表。</div>
                        {declareSetting?.paramValue === '1' && <DeclareTable />}
                    </div>
                )}
                {AUTH.SIGN && (
                    <div style={{ marginBottom: 24, maxWidth: 800 }}>
                        <FormHeader title="面试签到" id="interview4" style={{ marginBottom: 8 }} />
                        <div style={titleStyle}>
                            候选人到达面试场地后，扫描该二维码即可完成签到，系统将自动通知招聘负责人和面试官。
                        </div>
                        <div style={{ padding: '12px 32px' }}>
                            <ImageDownload />
                        </div>
                    </div>
                )}
            </div>
            {renderAnchor()}
        </div>
    );
};

export default withRouter(Interview);
